<!-- 图表页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>应用服务单元管理</title>
    <link href="../../../../../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../../../../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../../../../lib/ui/js/plugins/datepicker/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../../../../../lib/ui/css/flash.css">
    <link rel="stylesheet" href="../../../../../content/pc/sysmgt/blockchainManagement/blockchainManagement.css"/>
    <style>
        .outside-container{
            background-image: url(../../../../../lib/ui/img/background-image.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .cards-outside-container{
            overflow: auto;
           padding-left:8%;
           padding-right:8%;
           height: calc(100% - 60px);
        }
        .cards-container{
            height:unset;
            justify-content:flex-start;
            flex-wrap:wrap;
        }
        .cards-container>.card-div{
            margin-right: 10px;
            width: 30%;
            flex:unset;
            margin-top:30px;
        }
        .cards-container>.card-div:nth-of-type(3n+0){
            margin-right: 0;
        }
        .flex-unset{
            flex:unset;
        }
        .first-level-container{
            width: 72%;
            display: flex;
            margin-left: 20%;
        }
        .first-level-container>.card-div{
            flex:1;
            margin-right:5%;
        }
        .margin-top30{
            margin-top:30px;
        }
        .green-circle{
            background: #75b936;
            border-radius: 10px;
            border-color: #75b936;
            color: #fff;
            font-size: 12px;
            height: 20px;
            line-height: 20px;
            display: inline-block;
            max-width: 100%;
            padding: 0 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
            top: 5px;
        }
        .menu-popup{
            width:120px;
        }
        .menu-popup ul{
            background-color: #1e528f;
            border-radius: 2px;
            box-sizing: border-box;
            width: 120px;
            list-style: none;
            
        }
        .menu-popup li{
            height: 40px;
            line-height: 40px;
            width: 100%;
            padding-left: 15px;
        }
        .menu-popup li,a{
            color: #fff;
            font-size: 14px;
        }
        a:hover{
            text-decoration: none;
            color:#fff;
        }
        .menu-popup li:hover{
            background-color: #4a8ef7;
        }
        .head-removeP{
            text-align: center;
            background-color: #4a8ef7;
            color: #fff;
            padding: 6px;
        }
        .card-div{
            position: relative;
            margin-right:10px;
            height:280px;
        }
        .card-div .menu-popup{
            position: absolute;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        .menu-popup{
            display:none;
        }
        .glyphicon-remove{
            cursor: pointer;
        }
        .parameter1-popup{
            width:170px;
        }
        .parameter1-popup ul,.parameter1-popup li{
            width:170px;
        }
        .more-popup{
            top: 35px;
        }
        .dropdown-menu p{
            padding: 3px 5px;
            background-color: #2a86ff;
            color: #fff;
        }
        .dropdown-menu p{
            cursor: default;
        }
        .center-mian-container{
            width: 90%;
            margin-left: 5%;
        }
        .center-mian-container .card-div{
            margin-right: 2%;
            width: 32%;
        }
        .precent8{
            margin-left: 8%;
            margin-right: 8%;
            height: 56px;
            color: #14125e;
            background: hsla(0,0%,100%,.5);
            font-size: 25px;
            font-weight: bold;
            padding: 10px;
        }
        .btn-group .btn{
            padding: 6px;
            margin-top: -7px;
        }
        .btn-group .btn-primary{
            background-color: transparent;
            border-color: transparent;
        }
        .top4{
            top: 4px;
        }
    </style>
</head>
<body class="layui-view-body outside-container">
  <!-- 标题 -->
  <p class="title-h precent8">
    <span class="glyphicon glyphicon-menu-left glyphicon-remove top4" onclick="window.history.back()"></span>
    应用服务单元
</p>
  <div class="cards-outside-container">
    <!-- 按钮 -->
    <!-- <div class="btns1-container">
        <button type="button" class="btn btn-primary btnColor" id="createNewChain" data-target="#newStateModal" data-toggle="modal">新建应用服务单元</button>
    </div> -->
    <!-- 运控中心循环 -->
    <div class="first-level-container">
        #if(recordList!=null)
            #for(x:recordList)
                #if(recordList!=null && x.get("attrib_37").contains("运控"))
                    <div class="card-div" >
                        <div class="head-card">
                            <div class="head-card-text">
                                <p>上链指令数据</p>
                                #if(x.get("orderSize")!=null)
                                <p class="font-20 marginTop-12">#(x.get("orderSize"))</p>
                                #else
                                <p class="font-20 marginTop-12">0</p>
                                #end
                            </div>
                            <div class="head-card-text">
                                <p>上链状态数据</p>
                                #if(x.get("stateSize")!=null)
                                <p class="font-20 marginTop-12">#(x.get("stateSize"))</p>
                                #else
                                <p class="font-20 marginTop-12">0</p>
                                #end
                            </div>
                            <div class="head-card-text">
                                <p>上链存证数据</p>
                                #if(x.get("evidenceSize")!=null)
                                <p class="font-20 marginTop-12">#(x.get("evidenceSize"))</p>
                                #else
                                <p class="font-20 marginTop-12">0</p>
                                #end
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="glyphicon glyphicon-option-horizontal"></span>
                                <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="javascript:;" class="san">查看</a></li>
                                    <li><a href="javascript:;" class="san">编辑</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="main-card-conatiner">
                            #if(x.get("attrib_10")=="" || x.get("attrib_10")==null)
                                <p class="font-14">
                                    <span>运行状态</span>
                                    <!-- <span class="green-circle">暂无数据</span> -->
                                </p>
                                #else
                                <p class="font-14">
                                    <span>运行状态</span>
                                    <span class="green-circle">#(x.get("attrib_10"))</span>
                                </p>
                            #end
                            <p class="text-p">
                                <span class="color-text">所属站点</span>
                                <span class="color-value">#(x.get("attrib_37"))</span>
                            </p>
                            <p class="text-p">
                                <span class="color-text">创建时间</span>
                                <span class="color-value">#(x.get("created"))</span>
                            </p>
                            #if(roles==null)
                                <button type="button" class="btn btn-primary btnColor btnGropu"  onclick="unitManagementOnclick(this)" value="#(x.get('conflict_id'))">运行管理</button>
                            #else
                                #if( roles.toString().contains("管理"))
                                    <button type="button" class="btn btn-primary btnColor btnGropu"  onclick="unitManagementOnclick(this)" value="#(x.get('conflict_id'))">运行管理</button>
                                #end
                            #end
                            <button type="button" class="btn btn-primary btnColor btnGropu" onclick="businessOnclick(this)"  value="#(x.get('conflict_id'))">业务管理</button>
                        </div>
                    </div>
                #end
            #end
        #end
    </div>
    <!-- 非运控中心的循环 -->
    <div class="cards-container margin-top30 center-mian-container">
        #if(recordList!=null)
            #for(x:recordList)
                #if(recordList!=null && !x.get("attrib_37").contains("运控"))
                    <div class="card-div">
                        <div class="head-card">
                            <div class="head-card-text">
                                <p>上链指令数据</p>
                                #if(x.get("orderSize")!=null)
                                <p class="font-20 marginTop-12">#(x.get("orderSize"))</p>
                                #else
                                <p class="font-20 marginTop-12">0</p>
                                #end
                            </div>
                            <div class="head-card-text">
                                <p>上链状态数据</p>
                                #if(x.get("stateSize")!=null)
                                <p class="font-20 marginTop-12">#(x.get("stateSize"))</p>
                                #else
                                <p class="font-20 marginTop-12">0</p>
                                #end
                            </div>
                            <div class="head-card-text">
                                <p>上链存证数据</p>
                                #if(x.get("evidenceSize")!=null)
                                <p class="font-20 marginTop-12">#(x.get("evidenceSize"))</p>
                                #else
                                <p class="font-20 marginTop-12">0</p>
                                #end
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="glyphicon glyphicon-option-horizontal"></span>
                                <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="javascript:;" class="san">查看</a></li>
                                    <li><a href="javascript:;" class="san">编辑</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="main-card-conatiner">
                            #if(x.get("attrib_10")=="" || x.get("attrib_10")==null)
                                <p class="font-14">
                                    <span>运行状态</span>
                                    <!-- <span class="green-circle">暂无数据</span> -->
                                </p>
                            #else
                                <p class="font-14">
                                    <span>运行状态</span>
                                    <span class="green-circle">#(x.get("attrib_10"))</span>
                                </p>
                            #end
                            <p class="text-p">
                                <span class="color-text">所属站点</span>
                                <span class="color-value">#(x.get("attrib_37"))</span>
                            </p>
                            <p class="text-p">
                                <span class="color-text">创建时间</span>
                                <span class="color-value">#(x.get("created"))</span>
                            </p>
                            #if(roles==null)
                                <button type="button" class="btn btn-primary btnColor btnGropu"  onclick="unitManagementOnclick(this)" value="#(x.get('conflict_id'))">运行管理</button>
                            #else
                                #if( roles.toString().contains("管理"))
                                <button type="button" class="btn btn-primary btnColor btnGropu"  onclick="unitManagementOnclick(this)" value="#(x.get('conflict_id'))">运行管理</button>
                                #end
                            #end
                            <button type="button" class="btn btn-primary btnColor btnGropu" onclick="businessOnclick(this)" value="#(x.get('conflict_id'))">业务管理</button>
                        </div>
                    </div>
                #end
            #end
        #end
    </div>
    <!-- 新建站点的弹窗 -->
    <div class="modal fade" id="newStateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="exampleModalLabel">新建应用服务单元</h4>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label for="recipient-name" class="control-label">站点名称:</label>
                  <input type="text" class="form-control" id="recipient-name" placeholder="请输入站点名称">
                </div>
                <div class="form-group">
                  <label for="message-text" class="control-label">Message:</label>
                  <input type="text" class="form-control" id="recipient-name" placeholder="请输入站点名称">
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Send message</button>
            </div>
          </div>
        </div>
      </div>
  </div>
<script src="../../../../../lib/jquery/jquery.min.js"></script>
<script src="../../../../../lib/bootstrap/js/bootstrap.min.js"></script>
<script src="../../../../../lib/ui/js/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="../../../../../lib/ui/js/flash.js"></script>
<script src="../../../../../lib/echarts4.4/echarts.min.js"></script>
<script>
    function trunIndexFun(){
        window.open('/sysadmin/remoteApp/index', "_self");
    }   
    // 应用服务单元管理--运行管理页面
    function unitManagementOnclick(e) {
        //应用服务单元管理--运行管理页面
        window.open('/sysadmin/remoteApp/unitManagement?cid='+$(e).attr('value'), "_self");
    }
    //应用服务单元管理-应用管理
    function businessOnclick(e) {
        //应用服务单元管理--运行管理页面
        window.open('/sysadmin/remoteApp/smartContracts?cid='+$(e).attr('value'), "_self");
    }
    //新建站点点击事件
    $('#createNewChain').on('click',function(){

    });
    //请求链卡片---接口
    function loadCardDataFun(){
        //页面渲染
    }
    //卡片内部按钮点击事件

    $(document).ready(function() {
        //请求链卡片---接口
        loadCardDataFun();
        //

    }) 
</script>
</body>
</html>